浏览器储存

服务器通过设置set-cookie这个响应头，将 cookie 信息返回给浏览器，浏览器将响应头中的 cookie 信息保存在本地，当下次向服务器发送 HTTP 请求时，浏览器会自动将保存的这些 cookie 信息添加到请求头中。

通过 cookie，服务器就会识别出浏览器，从而保证返回的数据是这个用户的。

  • 通过set-cookie设置
  • 下次请求会自动带上
  • 键值对，可设置多个
  • API 简单，需要封装才能用

存储大小为 4k 左右，再长了会被截断。有个数限制（各个浏览器不同），一般不能超过 20 个。与服务器端通信：每次都会携带在 http 头中，如果使用 cookie 保存过多数据就会带来性能问题。

cookie 的跨域共享不是无条件的；在同一个域下，浏览器是可以携带 cookie。cookie 无法设置除当前域名或者其父域名之外的其他 domain。这个是浏览器出于对 cookie 的保护造成的，也就是 cookie 无法跨域设置。对于子域名也有如下规则，当前域名只能设置当前域名以及他的父域名，不能设置子域名。

属性

  • max-age 过期时间有多长
  • expires 到哪个时间点过期
  • secure 表示这个 cookie 只会在 https 的时候才会发送
  • HttpOnly 设置后无法通过在 js 中使用 document.cookie 访问。保障安全，防止攻击者盗用用户 cookie
  • domain 表示该 cookie 对于哪个域是有效的。

缺点

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。

  1. Cookie数量的限制。每个特定的域名下最多生成的个数有限制。 IE6 或更低版本最多 20 个 cookie, IE7 和之后的版本最后可以有 50 个 cookie, Firefox 最多 50 个 cookie, chrome 和 Safari 没有做硬性限制。
  2. IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。
  3. Cookie长度的限制。每个 cookie 长度不能超过 4KB，否则会被截掉。
  4. 安全性问题。如果 cookie 被人拦截了，那人就可以取得所有的 session 信息。即使加密也与事无补，因为拦截者并不需要知道 cookie 的意义，他只要原样转发 cookie 就可以达到目的了。
  5. 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

Session

浏览器第一次发送请求时，服务器自动生成了 SessionID，并将 sessionID 存放在 cookie 中通过响应发送到浏览器。浏览器第二次发送请求会将前一次服务器响应中的 sessionID 随着 cookie 发送到服务器上，服务器从请求中提取 sessionID，识别出用户。有失效时间。

session 依赖于 cookie，因为 sessionID 是存放在 cookie 中的。HTTP 就是通过 Session 和 Cookie 这两种方式一起合作来实现跟踪用户状态的，Session 用于服务器端，Cookie 用于客户端。

  1. cookie 数据存放在客户的浏览器上，session 数据放在服务器上。
  2. cookie 不是很安全，可以分析存放在本地的 cookie 并进行 cookie 欺骗，考虑到安全应当使用 session， 容易伪造，不如 session 安全。
  3. session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用 cookie。
  4. session 会消耗大量服务器资源，cookie 在每次 HTTP 请求中都会带上，影响网络性能。
  5. 域的支持范围不一样，比方说 a.com 的 Cookie 在 a.com 下都能用，而 www.a.com 的 session 在 api.a.com 下都不能用。
  6. 单个 cookie 保存的数据不能超过 4k，很多浏览器都限制一个站点最多保存 20 个 cookie。但是 session 没有限制。

locationStorage 和 sessionStorage

HTML5 标准就带来了 sessionStorage 和 localStorage ，先拿 localStorage 来说，它是专门为了浏览器端储存数据而设计的。其优点有:

  • 存储量增大到 5MB
  • 不会带到 HTTP 请求中
  • API 适用于数据存储 localStorage.getItem(key)

sessionStorage 的区别就在于它是根据 session 过去时间而实现，而 localStorage 会永久有效，应用场景不同。

针对 localStorage.setItem ，使用时尽量加入到 try-catch 中，某些浏览器是禁用这个 API 的，要注意。

web storage的概念和cookie相似，区别是它是为了更大容量存储设计的。

  1. cookie的大小是受限的
  2. 并且每次你请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽
  3. 另外cookie还需要指定作用域，不可以跨域调用。
  4. 除此之外，web storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
  5. 但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而web storage仅仅是为了在本地“存储”数据而生。
  6. 浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie 及 FF 需在 web 服务器里运行)。

IndexedDB

Last Updated:
Contributors: yiliang114